<template>
  <view class="container" :class="'theme-'+theme">
    <view class="left-bottom-sign"></view>
    <!-- <view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view> -->
    <view class="right-top-sign"></view>
    <!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
    <view class="wrapper">
      <view class="left-top-sign">LOGIN</view>
      <view class="welcome"> 欢迎进入{{title}} </view>
      <view class="input-content">
        <view class="input-item">
          <view class="title">
            <image src="../../static/newh5/phone.png" style="width: 14px;height: 20px"/>
            <text class="tit">手机号</text>
          </view>

          <input
            type="text"
            :value="username"
            ref="username"
            placeholder="请输入登录名"
            data-key="username"
            @input="inputChange"
          />
        </view>
        <view class="input-item" v-if="!mobileLogin">
          <view class="title">
            <image src="../../static/newh5/code.png" style="width: 14px;height: 20px"/>
             <text class="tit">密码</text>
          </view>
          <input
            type="text"
            :value="pwd"
            ref="pwd"
            placeholder="请输入密码"
            placeholder-class="input-empty"
            maxlength="20"
            password
            data-key="pwd"
            @input="inputChange"
            @confirm="toLogin"
          />
        </view>
		<!-- 短信登录 -->
		<view class="input-item" v-if="mobileLogin">
			<view class="title">
			  <image src="../../static/newh5/code.png" style="width: 14px;height: 20px"/>
			   <text class="tit">验证码</text>
			</view>
			<input
			  type="text"
			  :value="mobileCode"
			  ref="mobileCode"
			  placeholder="请输入短信验证码"
			  placeholder-class="input-empty"
			  maxlength="6"
			  data-key="mobileCode"
			  @input="inputChange"
			  @confirm="toLogin"
			/>
			<button class="codeBtn themeTextColor" @click="sendMsgCode" v-if="!sending">{{codeText}}</button>
			<button v-else class="codeBtn themeTextColor">{{codeText}}秒重新获取</button>
		</view>
      </view>
      <view class="remBox">
        <view class="rem" >
			<template  v-if="!mobileLogin">
				<checkbox
				  @click="remPwd = !remPwd"
				  :checked="remPwd"
				  class="checkbox"
				></checkbox>
				<text>记住密码(自动登录)</text>
			</template>
        </view>
        <view v-if="!mobileLogin" class="forgetRem themeTextColor"  @click="toReset"> 忘记密码? </view>
<!--        <view  class="forgetRem themeTextColor" @click="changeLoginWay" v-if="!mobileLogin && h5LoginType == '2'">短信登录</view>-->
<!--        <view  class="forgetRem themeTextColor" @click="changeLoginWay" v-if="mobileLogin && h5LoginType == '2'">账号登录</view>-->
      </view>

	  <!-- <view class="remBox">
	  	<view></view>
		<view class="forgetRem themeTextColor" @click="toReset"> 忘记密码? </view>
	  </view> -->


      <u-button
        class="confirm-btn login-btn"
        @click="toLogin"
        :ripple="true"
        :loading="loading"
        >登录</u-button
      >
	  <u-button
	    class="confirm-btn"
		  style="color:#1890ff;margin-top: 50upx;"
	    @click="toRegister2"
	    :ripple="true"
	    :loading="loading"
	    >注册</u-button
	  >
<!--      <view v-if="!mobileLogin" class="forget-section themeTextColor"  @click="toReset"> 忘记密码? </view>-->
      <view  class="forget-section themeTextColor" @click="changeLoginWay" style="color: grey !important;" v-if="!mobileLogin && h5LoginType == '2'">验证码登录</view>
      <view  class="forget-section themeTextColor" @click="changeLoginWay" style="color: grey !important;" v-if="mobileLogin && h5LoginType == '2'">账号密码登录</view>
    </view>
    <u-picker
      mode="selector"
      v-model="pickerShow"
      @confirm="pickerConfirm"
      @columnchange="columnChange"
      :range="range"
      range-key="fullDeptName"
    >
    </u-picker>

	<Vcode :show="VcodeShow" @success="successVcode()" @close="VcodeShow = false"></Vcode>
	<u-popup v-model="verifyVisible" @close="onVerifyCancel" mode="center" width="90%" :mask-close-able="false" :mask="true" zIndex="1000" border-radius="10" :closeable="true">
		<verify-slider ref="verifySlider" @refresh="onVerifyRefresh"
				   :theme-color="themeColor"
		           :block_y="block_y"
		           :imgUrl="imgUrl"
		           :miniImgUrl="miniImgUrl" @change="onVerifyChange"></verify-slider>
	</u-popup>
    <u-popup v-model="verifyVisible2" @close="onVerifyCancel"  mode="center" width="80%" :mask-close-able="false" :mask="true" zIndex="1000" border-radius="10" :closeable="false">
      <view class="verify-wrapper" style="padding: 15px;padding-top: 35px;position: relative;">
        <view class="register-title" style="">注册须知</view>
        <view style="padding: 40upx 10upx;">
          <view class="verify-bg-wrapper">
            很抱歉，当前暂未开通h5端注册入口，您可复制下方链接地址并通过电脑进行访问注册，感谢您的支持与配合！
          </view>
          <view  class="verify-bg-wrapper" style="word-break:break-word;color:#3C9CFF;">
            https://trade.szggzy.com/ggzy/center/#/register
          </view>
        </view>
        <view style="display:flex;padding: 0px 40upx;margin-top: -70upx;">
          <u-button class="confirm-btn" style="color: #909090;" @click="closeCopy">关闭</u-button>
		      <u-button class="confirm-btn" style="background:#3C9CFF;margin-left: 32upx;" @click="copyUrl">复制链接</u-button>
		    </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  encryptPwd,
  getPublicKey,
  settings,
  checkUserNumByMobileBeforeLogin,
  getDeptInfoByKey,
  wxBind,
  sendLoginMsg,
  loginTelValidNew,
  mobileLogin,
  getMobileBindInfo,
  getImageVerifyCode,
} from "@/api/public/login.js";
import VerifySlider from '@/components/verify-slider/verify-slider.vue'
import {
		mapMutations
} from 'vuex';
import { setStorage, getStorage } from "@/common/utils/storage.js";
import { Base64 } from "@/common/utils/base64.js";
import Vcode from 'vue-puzzle-vcode'
import UPicker from "../../uview-ui/components/u-picker/u-picker";
import UButton from "../../uview-ui/components/u-button/u-button";
export default {
  components: { UButton, UPicker, Vcode, VerifySlider },
  data() {
    return {
      username: "", // 冀中 13266666666/有色 13220233697
      pwd: "", //  Aa111111
      logining: false,
      loading: false,
      key: "",
      remPwd: false,
      range: [],
      // 部门选择弹窗
      pickerShow: false,
      jsencryptPwd: "",
      wxLogin: false,
      deptInfoKey: '',
      openKey: null,
	  title:'',

	  VcodeShow: false,
	  mobileLogin: false,
	  mobileCode: "",

	  codeText: "获取验证码",
	  sending: false,
	  uuid: "",
	  flag: "",
	  second: 60,  //倒计时
	  h5LoginType: "0" , // "h5登录类型：0-账号密码，1-短信验证码，2-密码和验证码，默认0"，
	  // 图形验证码相关
	  isVerifySlider: false, // 是否是滑动验证码
	  block_y:0,
	  imgUrl:'',
	  miniImgUrl: '',
	  verifyVisible:false,
	  verifyVisible2:false,
	  checkMoveId:''
    };
  },
  onLoad() {
    this.deptInfoKey = this.$route.query.deptKey;
	console.log('this.deptInfoKey',this.deptInfoKey)
    if(this.deptInfoKey && this.deptInfoKey.length > 0) {
      getDeptInfoByKey(this.deptInfoKey).then(res => {
        if(res.code === 1) {
          //默认选择第一个部门进行登录
          this.range = res.data;
          this.loading = false;
          this.pickerShow = true;
          this.wxLogin = true;
		  console.log('this.range',this.range)
        }else {
          this.$util.msg(res.message);
        }
      })
    }
    this.openKey = this.$route.query.openKey;
    if(this.openKey && this.openKey.length > 0) {
      uni.setStorageSync('openKey', this.openKey);
			uni.setStorageSync('wxLogin', true);
      this.wxLogin = true;
    }

    let loginInfo = getStorage("loginInfo");
    if (loginInfo) {
      this.username = loginInfo.username;
      this.remPwd = loginInfo.remPwd;
      this.pwd = Base64.decode(loginInfo.pwd);
      this.toLogin();
    }
  },
  onLoad() {

	uni.$emit("getTemporaryToken");

  	sessionStorage.removeItem('store')

	const settings = uni.getStorageSync("portalSettingsInfo");

	if(settings.h5LoginType) {
		this.h5LoginType = settings.h5LoginType;
	}

	this.h5LoginType = '2';

	if(this.h5LoginType == "0"){
		this.mobileLogin = false;
	}else if(this.h5LoginType == "1"){
		this.mobileLogin = true;
	}else if(this.h5LoginType == "2"){
		this.mobileLogin = false;
	}

	let accountLoginValidType = uni.getStorageSync('accountLoginValidType');
	// 滑动验证码
	this.isVerifySlider = !this.mobileLogin&&accountLoginValidType == '2'


  },
  onShow() {
    uni.setStorageSync('header',{});
    // settings().then(res => {
    //   if(res.code === 0){
    //     uni.setStorageSync('header',{
				// 			"Authorization": "Bearer " + res.data.authToken
				// 		});
    //   }
    // })
    let title = uni.getStorageSync("portalSettingsInfo").webTitle;
	if(title)
		this.title = title

	uni.removeStorageSync('hasShowNotice')
  },
  methods: {
	  ...mapMutations(['saveDepRange']),
	  getImageVerify(){
		  this.verifyVisible = true
		  	  getImageVerifyCode().then(res => {
		  	    if(res.code === 0){
		  	      const imgObj = res.data
		  	      this.block_y = imgObj.yHeight
		  	      this.imgUrl =  'data:image/png;base64,' + imgObj.bigImage
		  	      this.miniImgUrl = 'data:image/png;base64,' + imgObj.smallImage
		  	      this.checkMoveId = imgObj.chenckMoveid
		  	      if (this.$refs.verifySlider) {
		  			  this.$nextTick(()=>{
		  				this.$refs.verifySlider.reset()
		  			  })
		  	      }
		  	    }
		  	  })
		  },
    onVerifyChange(left){
    	this.deptLoginCheck({chenckMoveid:this.checkMoveId, xWidth:left})
    },
    onVerifyRefresh() {
        this.imgUrl = ''
        this.miniImgUrl = ''
        this.checkMoveId = ''
        this.block_y = 0
        this.getImageVerify()
    },
    onVerifyCancel(){
      this.verifyVisible = false
      this.imgUrl = ''
      this.miniImgUrl = ''
      this.checkMoveId = ''
      this.block_y = 0
	  this.loading = false
	  this.logining = false
    },
	successVcode(msg){
		this.VcodeShow = false;
		//若输入无问题则到后端查询手机号码是否已被注册
		const params = {
			mobile: this.username
		};
		/* 登录接口 */
		loginTelValidNew(params).then(res => {
			if (res.code == 0) {
				//发送手机验证码
				this.uuid = res.data;
				this.getCode()
			} else {
				this.$api.msg(res.message);
			}
		});
	},
	//获取验证码，设置定时器
	getCode() {
		//防止用户多次重复点击
		if (this.sending) {
			return;
		}
		const params = {
			uuid: this.uuid
		};
		this.second = 60;
		this.codeText = this.second;
		this.sending = true;
		sendLoginMsg(params).then(response => {
			if (response.code == 0) {
				this.timeDown();
				this.$api.msg("发送成功");

			} else {
				this.codeText = '获取验证码';
				this.sending = false;
				this.$api.msg(response.message);
			}
		})

	},
	//短信验证码定时器
	timeDown() {
		const timer = setInterval(() => {
			this.codeText--;
			if (this.codeText < 1) {
				clearInterval(timer);
				this.codeText = '获取验证码';
				this.sending = false;
				this.second = 60;
			}
		}, 1000)
	},
	changeLoginWay() {
		this.mobileLogin = !this.mobileLogin
	},
	sendMsgCode() {
		if (!this.username) {
			this.$api.msg("请先输入手机号码")
			return
		}
		let phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
		if (!phoneReg.test(this.username)) {
			this.$api.msg("手机号格式错误！");
			return;
		}

		this.VcodeShow = true;
	},
    pickerConfirm(e) {
      if(this.wxLogin) {
        this.wxLogin = false;
        const param = {
          key: this.deptInfoKey,
          userCode: this.range[e[0]].userCode
        }
        this.$store.dispatch('wxSelectDept', param).then(res => {
          if (res.code === 0) {
            this.$util.msg("登录成功");
			//储存部门信息值
			this.saveDepRange(this.range)
            uni.reLaunch({
              url: "/pages/index/index",
            });
          } else {
            this.$util.msg(res.message);
          }
        });
        return;
      }
	  let deptLoginData;

	  if(!this.mobileLogin){
		deptLoginData = {
		  deptId: this.range[e[0]].deptId,
		  key: this.key,
		  passwd: this.jsencryptPwd,
		  tenantId: this.range[e[0]].tenantId,
		  userCode: this.range[e[0]].userCode,
		};
	  }else{
		  deptLoginData = {
		    deptId: this.range[e[0]].deptId,
		    tenantId: this.range[e[0]].tenantId,
		    userCode: this.range[e[0]].userCode,
			flag: this.flag
		  };
	  }

      this.$store.dispatch("selectedDeptLogin", deptLoginData).then((res) => {
        this.logining = false;
		uni.hideLoading()
        if (res.code === 0) {
          this.$util.msg("登录成功");
		  //储存部门信息值
		  this.saveDepRange(this.range)
          this.bindOrToIndex();
        } else {
          deptLoginData;
          this.$util.msg(res.message);
        }
      });
    },
    columnChange(e) {},
    inputChange(e) {
      const key = e.currentTarget.dataset.key;
      this[key] = e.detail.value;
    },
    navBack() {
      uni.navigateBack();
    },
    toReset() {
      uni.navigateTo({
        url: "/pages/public/reset",
      });
    },
    toRegister() {
      uni.navigateTo({
        url: "/pages/public/register",
      });
    },
    closeCopy(){
	    this.verifyVisible2 = false
    },
    // 复制链接
    copyUrl(url) {
      const input = document.createElement("input");
      document.body.appendChild(input);
      // 要复制的值填下行代码右边
      input.setAttribute("value", "https://trade.szggzy.com/ggzy/center/#/register");
      document.body.appendChild(input);
      input.select();
      if (document.execCommand("copy")) {
        document.execCommand("copy");
      }
      document.body.removeChild(input);
      this.$util.msg("复制成功");
    },
    toRegister2(){
	    this.verifyVisible2 = true
    },
    toLogin() {
		console.log('this.range',this.range)
		if(!this.mobileLogin){
			this.logining = true;
			this.loading = true;
			var { username, pwd } = this;
			if (username === "") {
			  this.$api.msg("手机号不能为空！");
			  this.loading = false;
			  return false;
			}
			let phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
			if (!phoneReg.test(username)) {
			  this.$api.msg("手机号格式错误！");
			  this.logining = false;
			  this.loading = false;
			  return false;
			}
			if (pwd === "") {
			  this.$api.msg("密码不能为空！");
			  return false;
			}
			if (this.remPwd) {
			  setStorage("loginInfo", {
			    username: username,
			    pwd: Base64.encode(pwd),
			    remPwd: this.remPwd,
			  });
			}
			// #ifdef H5
			// 6.0 h5 只需做多部门的判断即可
			//this.normalLogin(username,pwd)
			this.deptLoginCheck();
			// #endif
		}else{
			/* 短信验证码登录 */
			if (!this.mobileCode) {
				this.$api.msg("请输入短信验证码")
				this.logining = false
				return false
			}
			if (!this.uuid) {
				this.$api.msg("请先获取验证码")
				this.logining = false
				return false
			}
			const param = {
				uuid: this.uuid,
				msgCode: this.mobileCode
			}
			this.logining = true;
			this.loading = true;
			mobileLogin(param).then(res=>{
				if(res.code === 0){
					this.$store.commit("login",res.data)
					this.$store.commit("setUserInfo", res.data);
					this.$store.commit("setHeader", {
						"Authorization": "Bearer " + res.data.authToken
					})
					uni.setStorageSync('token', res.data.authToken)
					uni.reLaunch({
					  url: "/pages/index/index",
					});
				}else if (res.code === 1&&res.message == "success") {
					//默认选择第一个部门进行登录
					this.flag = res.data.flag
					this.range = res.data.userList;
					this.loading = false;
					this.pickerShow = true;
					this.verifyVisible = false

				} else {
					this.logining = false;
					this.loading = false;
					this.$util.msg(res.message);
				}
			})
		}
    },
    deptLoginCheck(params={}) {
	  if(this.isVerifySlider&&(!params.xWidth||!params.chenckMoveid)){
	  	// 滑动验证码
	  	    this.getImageVerify()
	  	    return
	  	}
	  	uni.showLoading({
	  		mask:true,
	  		title:'登录中...'
	  	})
	  	let username = this.username
	  	let pwd = this.pwd
      const wxLogin = this.$store.wxLogin;
      const openKey = this.$store.openKey;
      getPublicKey({}, username).then((res) => {
        if (res) {
          if (res.code === 0) {
            let publicKey = res.data;
            if (publicKey.publicKey) {
              pwd = encryptPwd(publicKey,pwd);
            }
			this.key = publicKey.key;
            this.jsencryptPwd = pwd;
            const sendData = {
              loginType: "mobile",
              userCode: username,
              passwd: pwd,
              key: this.key,
			  ...params
            };
			uni.setStorageSync('jsencryptPwd',this.jsencryptPwd);
            checkUserNumByMobileBeforeLogin(sendData).then((res) => {
              if (res.code === 0) {
                //已经登录完成
                this.$store.dispatch("userLogin", sendData).then((res) => {
                  this.logining = false;
                  if (res.code === 0) {
                    this.$util.msg("登录成功");
                    this.bindOrToIndex();
                  } else {
                    this.logining = false;
                    this.loading = false;
                    this.$util.msg(res.message);
                  }
                });
              } else if (res.code === 1&&res.message == "success") {
                //默认选择第一个部门进行登录
                this.range = res.data;
                this.loading = false;
				uni.hideLoading()
				if(this.isVerifySlider){
				    this.getImageVerify()
				}
                this.pickerShow = true;
				this.verifyVisible = false
				        console.log(this.range)
              } else {
                this.logining = false;
                this.loading = false;
				uni.hideLoading()
				if(this.isVerifySlider){
				    this.getImageVerify()
				}
                this.$util.msg(res.message);
              }
            });
          } else {
            this.$util.msg(res.message);
            this.logining = false;
            this.loading = false;
			uni.hideLoading()
			if(this.isVerifySlider){
			    this.getImageVerify()
			}
          }
        } else {
          this.$util.msg("重新加载中...");
          this.logining = false;
          this.loading = false;
		  uni.hideLoading()
		  if(this.isVerifySlider){
		      this.getImageVerify()
		  }
        }
      });
    },
    bindOrToIndex() {
      const openKey = uni.getStorageSync('openKey');
      const isWxLogin = uni.getStorageSync('wxLogin');
      const mobile = uni.getStorageSync('userInfo').mobile;
      const that = this;

      if(isWxLogin && openKey) {
        getMobileBindInfo(mobile).then(res => {
          if(res.code == 1) {
            uni.showModal({
              title: '提示',
              content: '您还未绑定，是否需要绑定账号',
              confirmText: '去绑定',
              cancelText: '取消',
              success: (suc) => {
                uni.removeStorageSync('openKey');
                if (suc.confirm) {
                  wxBind(openKey).then(res => {
                    this.$util.msg(res.message);
                  })
                }
                that.delivery();
              }
            });
          return;
          } else {
            that.delivery();
          }
        }).catch(e => uni.reLaunch({url: "/pages/index/index"}))
      }
      uni.reLaunch({url: "/pages/index/index"});
    },
    delivery() {
      const userInfo = uni.getStorageSync('userInfo').userCode;
      const workInfo = uni.getStorageSync('workInfo');
      uni.removeStorageSync('workInfo');
      if (workInfo && userInfo == workInfo.userCode) {
        const isDone = workInfo.status == 'A' ? '0' : '';
        const bizType = workInfo.bizType;
        let route = 'backlog-detail';
        if (bizType == 'integral') {
          route = 'backlogWalfareDetail';
        }
        uni.navigateTo({
          url:
            `/pages/backlog/` + route +`?applyId=` + workInfo.applyId
            + `&procInstId=` + workInfo.procInstId
            + `&actInstId=` + workInfo.actInstId
            + `&isDone=` + isDone
        })
        return;
      }
      uni.reLaunch({url: "/pages/index/index",});
    }
  },
};
</script>

<style lang='scss'>
page {
  background: #fff;
}

.container {
  padding-top: 115px;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

.wrapper {
  position: relative;
  z-index: 90;
  background: #fff;
  padding-bottom: 40upx;
}

.back-btn {
  position: absolute;
  left: 40upx;
  z-index: 9999;
  padding-top: var(--status-bar-height);
  top: 40upx;
  font-size: 40upx;
  color: $font-color-dark;
}

.left-top-sign {
  font-size: 120upx;
  color: $page-color-base;
  position: relative;
  /* left: -16upx; */
}

.right-top-sign {
  position: absolute;
  top: 80upx;
  right: -30upx;
  z-index: 95;

  &:before,
  &:after {
    display: block;
    content: "";
    width: 400upx;
    height: 80upx;
    background: #b4f3e2;
  }

  &:before {
    transform: rotate(50deg);
    border-radius: 0 50px 0 0;
  }

  &:after {
    position: absolute;
    right: -198upx;
    top: 0;
    transform: rotate(-50deg);
    border-radius: 50px 0 0 0;
    /* background: pink; */
  }
}

.left-bottom-sign {
  position: absolute;
  left: -270upx;
  bottom: -320upx;
  border: 100upx solid #d0d1fd;
  border-radius: 50%;
  padding: 180upx;
}

.welcome {
  position: relative;
  left: 50upx;
  width: calc(100% - 50upx);
  top: -90upx;
  font-size: 46upx;
  color: #555;
  text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
}

.input-content {
  padding: 0 60upx;
}
.remBox{
  display: flex;
  min-height: 60upx;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  .forgetRem{
    color: $my-newh5-color;
    padding: 0 60rpx;
    font-family: PingFangSC-Regular;
  }
}
.rem {
  padding: 0 80rpx;
  display: flex;
  align-items: center;

  .checkbox {
    color: #409eff;
    transform: scale(0.6);
  }

  text {
    font-size: $font-sm + 2upx;
    color: grey;
  }
}

.input-item {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 30upx;
  // background: $page-color-light;
  height: 120upx;
  // border-radius: 4px;
  margin-bottom: 50upx;
  border-bottom: 1px solid #E2E2E2 ;
  .title{
    display: flex;
    align-items: center;
    // padding: 0 10rpx;
  }
  &:last-child {
    margin-bottom: 0;
  }

  .tit {
    height: 50upx;
    line-height: 56upx;
    font-size: $font-sm + 2upx;
    color: $font-color-base;
    padding:  0 10rpx;
  }

  input {
    height: 60upx;
    font-size: $font-base;
    color: $font-color-dark;
    width: 100%;
  }


  .codeBtn{
	  position: absolute;
	  right: 0;
	  bottom: 5upx;
	  height: 60upx;
	  line-height: normal;
	  display: flex;
	  align-items: center;
	  font-size: 28upx;
	  padding: 0;
	  border-radius: 36upx;
	  background: #fff;
	  margin-right: 0;
	  &::after{
		  border: none;
	  }
  }

}

.confirm-btn {
  width: 630upx;
  height: 76upx;
  line-height: 76upx;
  border-radius: 50px;
  margin-top: 70upx;
  color: #fff;
  font-size: $font-lg;

  &:after {
    border-radius: 100px;
  }
}

.forget-section {
  font-size: $font-sm + 2upx;
  color: $font-color-spec;
  text-align: center;
  margin-top: 40upx;
}

.register-section {
  position: absolute;
  left: 0;
  bottom: 50upx;
  width: 100%;
  font-size: $font-sm + 2upx;
  color: $font-color-base;
  text-align: center;

  text {
    color: $font-color-spec;
    margin-left: 10upx;
  }
}
.register-title {
  position: absolute;
  line-height: 15px;
  top: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: PingFangSC-Medium;
  font-size: 17px;
  font-weight: 600;
  color: #323232;
  z-index: 0;
}
</style>
